*{
    margin: 0;
    padding: 0;
}
.board{/*底座设置*/
    margin: 0 auto;
    position: relative;
    width: 600px;
    height: 450px;
    margin-top: 50px;
    background: rgb(210,210,210);
    border-radius: 20px;/*圆角设置*/
    box-shadow: 0px 5px 6px rgb(160,160,160);/*底座阴影*/
    /*底座做渐变色*/
    background: linear-gradient(60deg, rgba(250,250,250,1) 25%, rgba(210,210,210,1));
}
.board:before{
    /* 用伪元素before做笔记本盖子 */
    content: '';
    position: absolute;/*算距离让笔记本盖子居中*/
    top: -20px;
    left: -90px;
    display: block;
    width: 780px;
    height: 20px;
    background: rgb(210,210,210);
    border-top-left-radius: 390px 18px;/*左上角做一个大圆弧*/
    border-top-right-radius: 390px 18px;/*右上角做一个大圆弧*/
    background: -webkit-linear-gradient(rgba(210,210,210,1) 50%, rgba(255,255,255,1));/*渐变处理*/
    border-bottom: 2px solid #000;/*屏幕下的黑线*/
    border-bottom-left-radius: 3px;/*黑线的左下角做一个简单的融合*/
    border-bottom-right-radius: 3px;/*同理*/
}
.blackbar{/*坐旋转轴*/
    width: 450px;
    height: 18px;
    position: absolute;/*做好定位*/
    left: 75px;
    border-radius: 2px;/*角度*/
    border-bottom: 2px solid #fff;/*在旋转轴的下边加白线增加立体感*/
    border-right: 2px solid #fff;/*在旋转轴的右边加白线增加立体感*/
    background: linear-gradient(rgb(30,30,30), rgb(60,60,60) 35%, rgb(100,100,100) 50%, rgb(30,30,30) 65%);
}
.keyboard{/*键盘*/
    position: absolute;
    left: 35px;
    top: 35px;
    width: 530px;
    height: 216px;
    border: 1px solid rgb(180,180,180);
    border-radius: 8px;/*圆角处理*/
    background:rgba(250,250,250,1);
    box-shadow: 2px 0px 2px rgb(180,180,180) inset,/*做键盘向内的阴影*/
    0px 3px 3px rgb(180,180,180) inset,
    -5px -0px 1px rgb(255,255,255) inset,
    0px -3px 3px rgb(180,180,180) inset;
}
ul,li{/*键盘按键*/
    list-style: none;
    margin: 0 auto;
    padding: 0 auto;
    display: block;
    font-family: vrinda;
    /*按键上的字不能被选择*/
    user-select: none;
}
ul{
    width: 530px;
    height: 200px;
    margin-top: 8px;
    padding-left: 8px;
}
li{
    width: 29px;
    height: 29px;
    float: left;
    margin:0 5px 5px 0;
    background: rgb(30,30,30);
    color: rgb(200,200,200);
    text-align: center;
    line-height: 28px;
    font-size: 12px;
    border-radius: 4px;
    border:1px solid rgb(70,70,70);
    box-shadow:1px 0px 0px rgb(0,0,0),/*做立体感按键*/
    0px 1px 0px rgb(0,0,0),
    -1px 0px 0px rgb(0,0,0),
    0px -1px 0px rgb(0,0,0);
}
li:nth-child(-n+14):nth-child(n+1){/*前14个按键设置*/
    width: 30px;
    height: 15px;
}
li:nth-child(-n+27):nth-child(n+15) span,/*第15个到第27个按键的span设置*/
li:nth-child(40) span,/*第40个按键的span设置(以下同理)*/
li:nth-child(41) span,
li:nth-child(42) span{
    display: block;
    margin-top: 5px;
    line-height: 0.6;
}
li:nth-child(28),li:nth-child(29){
    width: 45px;
}
li:nth-child(43),li:nth-child(55){
    width: 55px;
}
li:nth-child(56),li:nth-child(67){
    width:73px;
}
li:nth-child(-n+74):nth-child(n+68){
    height:33px;
}
li:nth-child(72){
    width:173px;
}
li:nth-child(71),li:nth-child(73){
    width:37px;
}
li:nth-child(75),
li:nth-child(77),
li:nth-child(78){/*做上左右键*/
    margin-top: 18px;
    height: 14px;
}
li:nth-child(76){/*下键设置*/
    height: 13px;
    margin-top: 19px;
}
li:nth-child(78){/*上键定位*/
    position: absolute;
    bottom: 25px;
    right: 42px;
}
.touch{/*触控板*/
    position: absolute;
    left: 200px;
    bottom: 23px;
    width:200px;
    height: 150px;
    border: 2px solid rgb(190,190,190);
    border-radius: 8px;
}